<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-cloak</title>
</head>
<body>

<div id="app" v-cloak>
    {{ message }}
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
    /**
     * v-cloak不需要表达式，它会在Vue实例结束编译时，从绑定的html元素上移除，经常和CSS的dispaly：none配合使用
     *
     *
     * 在一般情况下，v-cloak是一个解决初始化慢导致页面闪动的最佳实践，对于简单的项目很实用，但是具有工程化的项目里，
     * 如webpack和vue-router时，项目的html结构只有一个空的div元素，剩下的内容都是由路由去挂载不同组件完成的，因此不再需要V-cloak。
     * **/


    var app = new Vue({
        el:"#app",
        data:{
            message:"这是一段文本",
        },
    });

</script>
</body>
</html>